<template>
	<view class="home">
		<danmu :visible="danmuVisible" ref="danmu" :initDanmus="danmus" :areaHeight="180" @send="handleSend"
			:speed="100" />
		<view class="fish_header">
			<view class="item">
				<view class="title">
					<view class="name">今日摸鱼</view>
					<view class="iconfont icon-eyes"></view>
				</view>
				<view class="item_data">
					<view class="txt">{{datas.curGetMoney}}</view>
				</view>
			</view>
			<view class="item">
				<view class="title">
					<view class="name">今日搬砖</view>
					<view class="iconfont icon-eyes"></view>
				</view>
				<view class="item_data">
					<view class="txt">{{datas.curGetMoney}}</view>
				</view>

			</view>
			<view class="item">
				<view class="title">
					<view class="name">今日收入</view>
					<view class="iconfont icon-eyes"></view>
				</view>
				<view class="item_data">
					<view class="txt">{{datas.curGetMoney}}</view>
				</view>
			</view>
		</view>
		<view class="countdown_time">
			<view class="title">距离下班还有：</view>
			<view class="countdown">
				<view class="txt">{{ hours>0?hours:'00' }}</view>:
				<view class="txt">{{ minutes>0?minutes:'00' }}</view>:
				<view class="txt">{{ seconds>0?seconds:'00' }}</view>
			</view>
		</view>
		<view class="fish_content">
			<view class="con_list">
				<view class="con_item">
					<view class="con_item_lt">
						<view class="con_title">
							<view class="name">本月时薪</view>
							<!-- <view class="iconfont icon-menu1"></view> -->
						</view>
						<view class="con_data">
							<view class="txt">{{datas.hourMoney}}</view>
						</view>
					</view>
					<view class="iconfont icon-menu1 anBreat">
					</view>
				</view>
				<view class="con_item">
					<view class="con_item_lt">
						<view class="con_title">
							<view class="name">今年收入</view>
							<view class="iconfont icon-right"></view>
						</view>
						<view class="con_data">
							<view class="txt">{{datas.allGetMoney}}</view>
						</view>
					</view>
					<view class="iconfont icon-menu2 anBreat">
					</view>
				</view>
				<view class="con_item">
					<view class="con_item_lt">
						<view class="con_title">
							<view class="name">工作时长</view>
							<view class="iconfont icon-right"></view>
						</view>
						<view class="con_data">
							<view class="txt">{{datas.hasWorkedHourTime}}</view>
						</view>
					</view>
					<view class="iconfont icon-menu3 anBreat">
					</view>
				</view>
				<view class="con_item">
					<view class="con_item_lt">
						<view class="con_title">
							<view class="name">摸鱼人数</view>
							<view @click.stop="showDmDialog" class="iconfont icon-editDm"></view>
						</view>
						<view class="con_data">
							<view class="txt">{{fishCount?fishCount:'0'}}</view>
						</view>
					</view>
					<view class="iconfont icon-menu4 anBreat">
					</view>
				</view>
				<view class="con_item">
					<view class="con_item_lt">
						<view class="con_title">
							<view class="name">距离放假</view>
							<view class="iconfont icon-right"></view>
						</view>
						<view class="con_data">
							<view class="txt">还有{{datas.satTime}}天</view>
						</view>
					</view>
					<view class="iconfont icon-menu5 anBreat">
					</view>
				</view>
				<view class="con_item">
					<view class="con_item_lt">
						<view class="con_title">
							<view class="name">距离退休</view>
							<view class="iconfont icon-right"></view>
						</view>
						<view class="con_data">
							<view class="txt">
								{{datas.retirementTime.years?datas.retirementTime.years+'年':''}}{{datas.retirementTime.months?datas.retirementTime.months+'个月':''}}
							</view>
						</view>
					</view>
					<view class="iconfont icon-menu6 anBreat">
					</view>
				</view>
				<view class="con_item">
					<view class="con_item_lt">
						<view class="con_title">
							<view class="name">距离发工资</view>
							<view class="iconfont icon-right"></view>
						</view>
						<view class="con_data">
							<view class="txt">还有{{datas.toPayday?datas.toPayday:'0'}}天</view>
						</view>
					</view>
					<view class="iconfont icon-menu7 anBreat">
					</view>
				</view>
				<view class="con_item">
					<view class="con_item_lt">
						<view class="con_title">
							<view class="name">你已入职</view>
							<view class="iconfont icon-right"></view>
						</view>
						<view class="con_data">
							<view class="txt">{{datas.entryTime?datas.entryTime:"0"}}天</view>
						</view>
					</view>
					<view class="iconfont icon-menu8 anBreat">
					</view>
				</view>
			</view>

		</view>
		<view class="config" @click="goConfig">
			<view class="iconfont icon-config"></view>
		</view>
		<view class="startFish" @click="showDmContent">
			<view class="iconfont icon-startFish"></view>
		</view>
		<view class="danmu-input-area" v-if="showTxtFlag">
			<input class="danmu-input" v-model="inputText" placeholder="发个弹幕吧~" @confirm="sendDanmu" />
			<button class="send-btn" @click="sendDanmu">发送</button>
			<view class="closeBtn" @click="handleCloseDialog">X</view>
		</view>



	</view>
</template>

<script>
	import danmu from '../../wxcomponents/danmu/danmu.vue'
	import {
		calculateWorkMinutes,
		getEntryTime,
		getWorkDaysInMonth,
		hasWorkedMinutes,
		culGetSatTime,
		getDaysToPayday,
		getRetirementYears,
		calculateAnnualSalary
	} from '../../utils/utils.js'

	export default {
		components: {
			danmu
		},
		data() {
			return {
				datas: {
					entryTime: '', //入职时间
					worktimeDays: 0, //工作日
					worktimeMinutes: 0, //工作分钟数
					hourMoney: 0, //时薪
					hasWorkedMinutesTime: 0, //已经工作分钟数
					hasWorkedHourTime: 0,
					curGetMoney: 0, //当前收入
					satTime: 0,
					toPayday: 0,
					retirementTime: null,
					allGetMoney: 0,
				},
				fishUserInfo: {
					wages: 0, //薪资
					entryTime: '2024/05/15', //入职时间
					workTime: {
						time1: '9:00',
						time2: '12:30',
						time3: '14:00',
						time4: '18:00',
					}, //工资时间
					payTime: 10, //发薪日
					birthDate: '1990/01/01',
					gender: 1

				},
				holidays: ['2025-01-01',
					'2025-01-28', '2025-01-29', '2025-01-30', '2025-01-31', '2025-02-01', '2025-02-02', '2025-02-03',
					'2025-02-04', '2025-04-04', '2025-04-05', '2025-04-06', '2025-05-01', '2025-05-02', '2025-05-03',
					'2025-05-04', '2025-05-05', '2025-10-01', '2025-10-02', '2025-10-03', '2025-10-04', '2025-10-05',
					'2025-10-06', '2025-10-07', '2025-10-08'
				],
				fishCount: '',
				now: new Date(),
				timer: null,
				targetTime: '', // 从缓存获取的目标时间
				countdownText: '00:00:00',
				timer: null,
				showCountdown: false,
				hours: '',
				minutes: '',
				seconds: '',
				danmuVisible: false,
				danmus: [
					'上班好困啊zzz',
					'假装在工作ing',
					'老板来了叫我',
					'刷会微博先',
					'又到点该去厕所了',
					'今天也是带薪拉屎的一天',
					'摸鱼一时爽，一直摸鱼一直爽',
					'这个会要开到什么时候...',
					'好想下班啊',
					'工作5分钟，摸鱼2小时',
					'假装在写代码',
					'微信聊天才是主业',
					'刷会淘宝压压惊',
					'同事都在摸鱼，我也摸',
					'这个PPT我能做一周',
					'带薪发呆中',
					'假装很忙的样子',
					'刷会短视频',
					'工作？什么工作？',
					'又到下午茶时间了',
					'偷偷追剧美滋滋',
					'这个表格我能填一天',
					'摸鱼技术哪家强',
					'上班就是为了等下班',
					'假装在开会其实在睡觉',
					'刷会朋友圈',
					'工作是不可能工作的',
					'带薪网购时间到',
					'摸鱼使我快乐',
					'老板你看不见我'
				],
				inputText: "",
				showTxtFlag: false
			};
		},

		onShow() {
			if (uni.getStorageSync('fishUserInfo')) {
				this.fishUserInfo = JSON.parse(uni.getStorageSync('fishUserInfo'))
				this.datas.entryTime = getEntryTime(this.fishUserInfo.entryTime)
				this.datas.worktimeDays = getWorkDaysInMonth(2025, 5, this.holidays)
				this.datas.worktimeMinutes = calculateWorkMinutes(this.fishUserInfo.workTime)
				this.datas.hourMoney = this.getHourMoney('hh')
				this.datas.hasWorkedMinutesTime = hasWorkedMinutes(this.fishUserInfo.workTime)
				this.datas.curGetMoney = (this.datas.hasWorkedMinutesTime * this.getHourMoney('mm')).toFixed(2)
				this.datas.hasWorkedHourTime = (this.datas.hasWorkedMinutesTime / 60).toFixed(2)
				this.datas.satTime = culGetSatTime()
				this.datas.toPayday = getDaysToPayday(this.fishUserInfo.payTime)
				this.datas.retirementTime = getRetirementYears(this.fishUserInfo.birthDate.split('-').join('/'), this
					.fishUserInfo
					.gender)
				this.fishCount = Math.floor(Math.random() * 201) + 1000
				this.datas.allGetMoney = calculateAnnualSalary(this.fishUserInfo.entryTime.split('-').join('/'), Number(
					this
					.fishUserInfo.wages), this.holidays)
				if (this.fishUserInfo.workTime.time4) {
					this.startCountdown(this.fishUserInfo.workTime.time4 + ":00")
				}
			} else {
				uni.showToast({
					title: '请先从右下角配置数据！',
					icon: 'none'
				})
			}


		},
		onLaunch() {
			this.hour = '00'
			this.minutes = '00'
			this.seconds = '00'
			clearInterval(this.timer)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		onShareAppMessage(res) {
			let title = ""
			let money = (this.datas.hasWorkedHourTime * this.datas.hourMoney).toFixed(2)
			if ((this.hours == '00' || !this.hours) && (this.minutes == '00' || !this.minutes) && (this.seconds == '00' ||
					!this.minutes)) {
				title = `今日${money}元窝囊费到手，下班！`
			} else {
				title = `倒计时${this.hours}:${this.minutes}:${this.seconds}下班，太爽啦！`
			}
			return {
				title: title, // 必填，最长28汉字
				path: '/pages/fish/index', // 带参数示例
				imageUrl: '/static/images/share_fish.jpg' // 建议尺寸比例5:4
			}
		},
		methods: {

			// 获取时薪
			getHourMoney(type) {
				let money = 0;
				if (type == 'hh') {
					money = this.fishUserInfo.wages / this.datas.worktimeDays / this.datas.worktimeMinutes * 60
				} else if (type == 'mm') {
					money = this.fishUserInfo.wages / this.datas.worktimeDays / this.datas.worktimeMinutes
				}
				return money.toFixed(2)
			},
			goConfig() {
				uni.navigateTo({
					url: '/pages/fish/config'
				})
			},
			startCountdown(targetTime) {
				let that = this
				clearInterval(this.timer)

				const update = () => {
					const now = new Date()
					const [targetHour, targetMin, targetSec] = targetTime.split(':')
					let targetDate = new Date(
						now.getFullYear(),
						now.getMonth(),
						now.getDate(),
						targetHour,
						targetMin,
						targetSec
					)
					const diff = targetDate - now

					if (diff <= 0) {
						that.hours = '00'
						that.seconds = '00'
						that.minutes = '00'
						clearInterval(this.timer)
						that.countdown = ''
						return
					}
					const hours = Math.floor(diff / (1000 * 60 * 60))
					const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
					const seconds = Math.floor((diff % (1000 * 60)) / 1000)

					this.countdown =
						`${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
					that.hours = hours.toString().padStart(2, '0')
					that.minutes = minutes.toString().padStart(2, '0')
					that.seconds = seconds.toString().padStart(2, '0')
				}

				update()
				this.timer = setInterval(update, 1000)
			},

			sendDanmu() {
				this.danmuVisible = true
				this.$refs.danmu.sendDanmu(this.inputText)
				this.inputText = ""
			},
			showDmContent() {
				this.danmuVisible = !this.danmuVisible
			},
			showDmDialog() {
				this.showTxtFlag = true
			},
			handleCloseDialog() {
				this.showTxtFlag = false
			}
		},
	};
</script>

<style lang="less" scoped="">
	body {
		font-family: "Alibaba";
	}


	.home {
		background: #ffdeae;
		padding-bottom: 0.2rem;
		height: 100vh;
		padding-top: 20px;
	}

	.fish_header {
		width: 92%;
		display: flex;
		margin: auto;
		background: #fff9f2;
		border-radius: 10px;
		align-items: center;
		text-align: center;
		justify-content: center;
		padding: 10px 0;

		.item {
			width: 33.33%;
			flex-wrap: nowrap;
			display: inline-block;
			text-align: center;
			font-size: 24rpx;
			border-right: 1px solid #ccc;

			&:last-child {
				border: 0;
			}

			.title {
				display: flex;
				text-align: center;
				margin-bottom: 10rpx;

				.name {
					width: 100%;
					text-align: center;
					color: #999;
					font-size: 30rpx;
					font-weight: bold;
				}
			}

			.item_data {
				text-align: center;
				display: flex;
				width: 100%;
				align-items: center;
				align-self: center;
				justify-content: center;

				.txt {
					margin-right: 10rpx;
				}

				.txt1 {}
			}
		}
	}

	.countdown_time {
		width: 92%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff9f2;
		border-radius: 10px;
		margin: 40px auto;
		padding: 20rpx 0;

		.title {
			font-size: 30rpx;
			color: #666;
		}

		.countdown {
			display: flex;
			align-items: center;
			font-size: 70rpx;

			.txt {
				background: #eab270;
				font-size: 70rpx;
				color: #fff;
				padding: 10rpx;
				border-radius: 5px;

				&:nth-child(1) {
					margin-right: 10rpx;
				}

				&:nth-child(2) {
					margin: 0 10rpx;
				}

				&:nth-child(3) {
					margin-left: 10rpx;
				}
			}
		}
	}

	.fish_content {
		width: 92%;
		margin: auto;
		margin-top: 20px;

		.con_list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.con_item {
				// float: left;
				margin-right: 2%;
				width: 49%;
				background: #fff9f2;
				border-radius: 10px;
				height: 120rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				margin-bottom: 10px;
				box-sizing: border-box;

				&:nth-child(2n) {
					margin-right: 0;
				}

				.iconfont {
					font-size: 80rpx;
					margin-left: 20rpx;
				}

				.con_item_lt {
					.con_title {
						display: flex;
						align-items: center;

						.name {
							width: 100%;
							color: #999;
							font-size: 28rpx;
							font-weight: bold;
						}

						.icon-editDm {
							font-size: 14px;
							color: #999;
							font-weight: bold;
							// top: 3px;
							// position: relative;
						}
					}

					.con_data {
						text-align: center;
						display: flex;
						width: 100%;
						align-items: center;

						.txt {
							margin-right: 10rpx;
						}

						.txt1 {}
					}
				}
			}
		}
	}

	.config {
		position: fixed;
		bottom: 5vh;
		right: 0;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		height: 50px;
		width: 65px;
		text-align: center;
		line-height: 50px;
		background: rgba(255, 255, 255, 0.7);

		.iconfont {
			font-size: 30px;
		}

	}

	.anBreat {
		animation: breathing-combined 3s ease-in-out infinite;
	}

	.startFish {
		position: fixed;
		bottom: 5vh;
		left: 0;
		height: 50px;
		width: 65px;
		text-align: center;
		line-height: 50px;
		background: rgba(255, 255, 255, 0.7);
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;

		.iconfont {
			font-size: 30px;
		}
	}

	@keyframes breathing-combined {

		0%,
		100% {
			transform: scale(0.98);
			opacity: 0.9;
		}

		50% {
			transform: scale(1.1);
			opacity: 1;
		}
	}

	.danmu-input {
		flex: 1;
		height: 40px;
		padding: 0 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		margin-right: 10px;
		box-sizing: border-box;
		font-size: 14px;
	}

	.send-btn {
		height: 40px;
		line-height: 40px;
		padding: 0 15px;
		font-size: 12px;
		background-color: #07C160;
		color: #fff;
		border-radius: 8px;
	}

	.danmu-input-area {
		display: flex;
		padding: 10px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100px;
		box-sizing: border-box;
		padding-top: 30px;
		box-shadow: 0 -5px 15px -5px rgba(0, 0, 0, 0.2);

		.closeBtn {
			font-size: 16px;
			height: 40px;
			width: 40px;
			line-height: 40px;
			margin-left: 10px;
			text-align: center;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 8px;
			color: #fff;
		}
	}
</style>